<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>图像上传</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/webuploader/0.1.1/webuploader.css">
</head>
<body>
<div id="uploader-demo">
    <!--用来存放item-->
    <div id="fileList" class="uploader-list"></div>
    <div id="filePicker">选择图片</div>
</div>
<script src="https://cdn.p00q.cn/hAdmin/js/jquery.min.js?v=2.1.4"></script>
<script src="https://cdn.bootcss.com/webuploader/0.1.1/webuploader.js"></script>
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<script>
    $(function(){
        // 初始化Web Uploader
        var uploader = WebUploader.create({
            // 选完文件后，是否自动上传。
            fileNumLimit:1,
            auto: true,
            fileVal:'image',
            swf: 'https://cdn.bootcss.com/webuploader/0.1.1/Uploader.swf',
            // 文件接收服务端。
            server: 'http://img.p00q.cn:222/api/upload',
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#filePicker',
            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });
        // 当有文件添加进来的时候
            uploader.on( 'fileQueued', function( file ) {
            var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img>' +
                '<div class="info">' + file.name + '</div>' +
                '</div>'
                ),
                $img = $li.find('img');
            // $list为容器jQuery实例
            var $list = $("#fileList");
            $list.empty();
            $list.append($li);
            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }
                $img.attr( 'src', src );
            }, 100, 100 );
        });
        uploader.on('uploadSuccess', function (file, response) {
            var arrayJsonObject =eval("("+response._raw+")");
            $.post("/hedimgupdate",{url:arrayJsonObject.data.url},function(result){
                if(result=="ok"){
                    alert("上传成功!");
                }
            });
        });
        uploader.on( 'uploadError', function() {
            parent.layer.msg('修改失败');
        });
    });
</script>
</body>
</html>